<%- include('../../components/header'); %>

<div class="container">
    <h4 class="latest-text w3_latest_text" style="margin-left:0!important;">圆棒加工报价</h4>

    <div class="pageBox">
        <div class="quoBox">
            <div class="quoBoxCon">
                <div>
                    <h5>
                        材料
                    </h5>
                    <div class="selectBoxS">
                        <select name="" id="">
                            <option value="">Q235</option>
                            <option value="">304</option>
                            <option value="">C45</option>
                            <option value="">316</option>
                            <option value="">316L</option>
                            <option value="">SKD11</option>
                            <option value="">尼龙</option>
                        </select>
                    </div>
                </div>

                <div>
                    <h5>
                        规格
                    </h5>
                    <div class="inputBoxs">
                        <p>
                            <span>直径(mm)</span>
                            <input type="text">
                        </p>
                        <p>
                            <span>长(mm)</span>
                            <input type="text">
                        </p>
                    </div>
                </div>

                <!-- 轴端螺纹 -->
                <div>
                    <h5>
                        轴端螺纹
                        <span class="whatsDet" data-toggle="modal" data-target="#zhouduanluowen" >这是什么？</span>
                        
                    </h5>
                    <div class="radioBoxS">
                        <label for="zdlwY">
                            <input type="radio" id="zdlwY" name="zdlw"> 是
                        </label>
                        <label for="zdlwN">
                            <input type="radio" id="zdlwN" name="zdlw"> 否
                        </label>
                    </div>
                    <div class="scaleBoxYBJG">
                        <p>
                            <em>
                                螺纹数量
                            </em>
                            <select name="" id="lwsl">
                                <option value="1">
                                    1
                                </option>
                                <option value="2">
                                    2
                                </option>
                            </select>
                        </p>
                        <table style="width:60%;">
                            <tr>
                                <td>
                                    <em>
                                        规格
                                    </em>
                                    <select name="" id="">
                                        <option value="">
                                            M4
                                        </option>
                                        <option value="">
                                            M5
                                        </option>
                                        <option value="">
                                            M6
                                        </option>
                                        <option value="">
                                            M8
                                        </option>
                                        <option value="">
                                            M10
                                        </option>
                                        <option value="">
                                            M12
                                        </option>
                                        <option value="">
                                            M14
                                        </option>
                                        <option value="">
                                            M16
                                        </option>
                                    </select>
                                </td>
                                <td>
                                    <em>
                                        螺纹长(mm)
                                    </em>
                                    <input type="text">
                                </td>
                            </tr>
                            <tr id="zdlw2" style="display:none;">
                                <td>
                                    <em>
                                        规格
                                    </em>
                                    <select name="" id="">
                                        <option value="">
                                            M4
                                        </option>
                                        <option value="">
                                            M5
                                        </option>
                                        <option value="">
                                            M6
                                        </option>
                                        <option value="">
                                            M8
                                        </option>
                                        <option value="">
                                            M10
                                        </option>
                                        <option value="">
                                            M12
                                        </option>
                                        <option value="">
                                            M14
                                        </option>
                                        <option value="">
                                            M16
                                        </option>
                                    </select>
                                </td>
                                <td>
                                    <em>
                                        螺纹长(mm)
                                    </em>
                                    <input type="text">
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
                <!-- 梯轴 -->
                <div>
                    <h5>
                        梯轴
                        <span class="whatsDet" data-toggle="modal" data-target="#zhouti" >这是什么？</span>
                        
                    </h5>
                    <div class="radioBoxS">
                        <label for="tzY">
                            <input type="radio" id="tzY" name="tz"> 是
                        </label>
                        <label for="tzN">
                            <input type="radio" id="tzN" name="tz"> 否
                        </label>
                    </div>
                    <div class="scaleBox">
                        <table style="width:80%;">
                            <tr>
                                <td>序号</td>
                                <td>
                                    直径
                                </td>
                                <td>
                                    长度
                                </td>
                                <td>
                                    数量
                                </td>
                                <td>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    1
                                </td>
                                <td>
                                    <input type="text">
                                </td>
                                <td>
                                    <input type="text">
                                </td>
                                <td>
                                    <input type="text">
                                </td>
                                <td>
                                    <span class="addtzItem ">+添加规格</span>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
                <!-- 轴端方型 -->
                <div>
                    <h5>
                        轴端方型
                        <span class="whatsDet" data-toggle="modal" data-target="#zhouduanfangxing" >这是什么？</span>
                        
                    </h5>
                    <div class="radioBoxS">
                        <label for="zdfxY">
                            <input type="radio" id="zdfxY" name="zdfx"> 是
                        </label>
                        <label for="zdfxN">
                            <input type="radio" id="zdfxN" name="zdfx"> 否
                        </label>
                    </div>
                    <div class="scaleBox">
                        <table style="width:80%;">
                            <tr>
                                <td>序号</td>
                                <td>
                                    长
                                </td>
                                <td>
                                    宽
                                </td>
                                <td>
                                    高
                                </td>
                                <td>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    1
                                </td>
                                <td>
                                    <input type="text">
                                </td>
                                <td>
                                    <input type="text">
                                </td>
                                <td>
                                    <input type="text">
                                </td>
                                <td>
                                    <span class="addtzItem2">+添加规格</span>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>

                <!-- 键槽 -->
                <div>
                    <h5>
                        键槽
                        <span class="whatsDet" data-toggle="modal" data-target="#jiancao" >这是什么？</span>
                        
                    </h5>
                    <div class="radioBoxS">
                        <label for="jcY">
                            <input type="radio" id="jcY" name="jc"> 是
                        </label>
                        <label for="jcN">
                            <input type="radio" id="jcN" name="jc"> 否
                        </label>
                    </div>
                    <div class="scaleBox">
                        <table style="width:80%;">
                            <tr>
                                <td>
                                    规格
                                </td>
                                <td>
                                    <select name="" id="">
                                        <option value="">
                                            M4
                                        </option>
                                        <option value="">
                                            M5
                                        </option>
                                        <option value="">
                                            M6
                                        </option>
                                        <option value="">
                                            M8
                                        </option>
                                        <option value="">
                                            M10
                                        </option>
                                        <option value="">
                                            M12
                                        </option>
                                        <option value="">
                                            M14
                                        </option>
                                        <option value="">
                                            M16
                                        </option>
                                    </select>
                                </td>
                                <td style="padding-left: 14%;">
                                    数量
                                </td>
                                <td>
                                    <input type="text">
                                </td>
                                <td>
                                    <span class="addtzItem_jc">+添加规格</span>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
                <!-- 内孔 -->
                <div>
                    <h5>
                        内孔
                        <span class="whatsDet" data-toggle="modal" data-target="#neikong" >这是什么？</span>
                        
                    </h5>
                    <div class="radioBoxS">
                        <label for="nkY">
                            <input type="radio" id="nkY" name="nk"> 是
                        </label>
                        <label for="nkN">
                            <input type="radio" id="nkN" name="nk"> 否
                        </label>
                    </div>
                    <div class="scaleBox">
                        <table style="width:80%;">
                            <tr>
                                <td>序号</td>
                                <td>
                                    直径
                                </td>
                                <td>
                                    长度
                                </td>
                                <td>
                                    数量
                                </td>
                                <td>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    1
                                </td>
                                <td>
                                    <input type="text">
                                </td>
                                <td>
                                    <input type="text">
                                </td>
                                <td>
                                    <input type="text">
                                </td>
                                <td>
                                    <span class="addtzItem3">+添加规格</span>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
                <!-- 通孔 -->
                <div>
                    <h5>
                        通孔
                    </h5>
                    <div class="radioBoxS">
                        <label for="tkY">
                            <input type="radio" id="tkY" name="tk"> 是
                        </label>
                        <label for="tkN">
                            <input type="radio" id="tkN" name="tk"> 否
                        </label>
                    </div>
                </div>
                <!-- 沉孔 -->
                <div>
                    <h5>
                        沉孔
                    </h5>
                    <div class="radioBoxS">
                        <label for="ckY">
                            <input type="radio" id="ckY" name="ck"> 是
                        </label>
                        <label for="ckN">
                            <input type="radio" id="ckN" name="ck"> 否
                        </label>
                    </div>
                </div>

                <!-- 螺纹孔 -->
                <div>
                    <h5>
                        螺纹孔
                    </h5>
                    <div class="radioBoxS">
                        <label for="lwkY">
                            <input type="radio" id="lwkY" name="lwk"> 是
                        </label>
                        <label for="lwkN">
                            <input type="radio" id="lwkN" name="lwk"> 否
                        </label>
                    </div>
                </div>




                <div>
                    <h5>
                        表面粗糙度
                    </h5>
                    <div class="selectBoxS">
                        <select name="" id="">
                            <option value="">12.5</option>
                            <option value="">6.3</option>
                            <option value="">3.2</option>
                            <option value="">1.6</option>
                            <option value="">0.8</option>
                        </select>
                    </div>
                </div>


                <div>
                    <h5>
                        热处理
                    </h5>
                    <div class="selectBoxS">
                        <select name="" id="">
                            <option value="">无</option>
                            <option value="">调质</option>
                            <option value="">淬火</option>
                        </select>
                    </div>
                </div>


                <div>
                    <h5>
                        表面处理
                    </h5>
                    <div class="selectBoxS">
                        <select name="" id="">
                            <option value="">无</option>
                            <option value="">镀锌</option>
                            <option value="">镀镍</option>
                            <option value="">镀铬</option>
                            <option value="">喷砂氧化</option>
                            <option value="">发黑</option>
                        </select>
                    </div>
                </div>





                <div class="orderCheck">
                    <div>
                        <input type="button" value="点击查询单价">
                        <div>

                            <table>
                                <tr>
                                    <td>

                                        <span>
                                            材料：
                                        </span>
                                        <em>

                                        </em>
                                    </td>
                                </tr>
                                <tr>
                                    <td>

                                        <span>
                                            加工工艺：
                                        </span>
                                        <em>

                                        </em>
                                    </td>
                                </tr>
                                <tr>
                                    <td>

                                        <span>
                                            孔加工：
                                        </span>
                                        <em>

                                        </em>
                                    </td>
                                </tr>
                                <tr>
                                    <td>

                                        <span>
                                            表面粗糙度：
                                        </span>
                                        <em>

                                        </em>
                                    </td>
                                </tr>
                                <tr>
                                    <td>

                                        <span>
                                            热处理：
                                        </span>
                                        <em>

                                        </em>
                                    </td>
                                </tr>
                                <tr>
                                    <td>

                                        <span>
                                            表面处理：
                                        </span>
                                        <em>

                                        </em>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <%- include('../../components/form-right'); %>
        </div>

    </div>




    <!-- bootstrap-pop-up 轴端螺纹是什么-->
<div class="modal video-modal fade" id="zhouduanluowen" tabindex="-1" role="dialog" aria-labelledby="zhouduanluowen">
        <div class="modal-dialog" role="document" style="width:700px;">
            <div class="modal-content">
                <div class="modal-header">
                    轴端螺纹的定义详情
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="imgDet" >
                    <p>
                        <img src="/images/zhouduanluowen01.png" alt="" width="80%">
                    </p>
                </div>                
            </div>
        </div>
    </div>
<!-- bootstrap-pop-up 轴端螺纹是什么-->

<!-- bootstrap-pop-up 阶梯轴 =轴梯-->
<div class="modal video-modal fade" id="zhouti" tabindex="-1" role="dialog" aria-labelledby="zhouti">
        <div class="modal-dialog" role="document" style="width:700px;">
            <div class="modal-content">
                <div class="modal-header">
                    阶梯轴的定义详情
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="imgDet" >
                    <p>
                        <img src="/images/zhouti01.png" alt="" width="98%">
                    </p>
                </div>                
            </div>
        </div>
    </div>
 <!-- bootstrap-pop-up 阶梯轴 =轴梯-->

<!-- bootstrap-pop-up 内孔 -->
<div class="modal video-modal fade" id="neikong" tabindex="-1" role="dialog" aria-labelledby="neikong">
    <div class="modal-dialog" role="document" style="width:700px;">
        <div class="modal-content">
            <div class="modal-header">
                内孔的定义详情
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="imgDet" >
                <p>
                    <img src="/images/neikong01.png" alt="" width="98%">
                </p>
            </div>                
        </div>
    </div>
</div>
<!-- bootstrap-pop-up 内孔-->

 <!-- bootstrap-pop-up 轴端方型-->
<div class="modal video-modal fade" id="zhouduanfangxing" tabindex="-1" role="dialog" aria-labelledby="zhouduanfangxing">
        <div class="modal-dialog" role="document" style="width:700px;">
            <div class="modal-content">
                <div class="modal-header">
                        轴端方的定义详情
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="imgDet" >
                    <p>
                        <img src="/images/zhouduanfangxing01.png" alt="" width="98%">
                    </p>
                </div>                
            </div>
        </div>
    </div>
 <!-- bootstrap-pop-up 轴端方型-->

 <!-- bootstrap-pop-up 键槽-->
<div class="modal video-modal fade" id="jiancao" tabindex="-1" role="dialog" aria-labelledby="jiancao">
        <div class="modal-dialog" role="document" style="width:700px;">
            <div class="modal-content">
                <div class="modal-header">
                        键槽的定义详情
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="imgDet" >
                    <p>
                        <img src="/images/jiancao01.png" alt="" width="98%">
                    </p>
                </div>                
            </div>
        </div>
    </div>
 <!-- bootstrap-pop-up 键槽-->
</div>

<script>

        //轴端螺纹的通用方法
        function showSizeBoxOther(DomInpName, DomInpRadio, addBtn, addBtnName) {
            DomInpName.change(function () {
                if (DomInpRadio.prop('checked')) {
                    //获取是否选中 并判断是否显示 规格输入 盒子；
                    DomInpRadio.parent("label").parent("div").siblings("div.scaleBoxYBJG").show();
                } else {
                    DomInpRadio.closest("div").siblings("div.scaleBoxYBJG").hide();
                }
            });
        };
        $("#lwsl").change(function(){
            if( $("#lwsl option:selected").val() == 2 ){
                $("#zdlw2").show();
            }else{
                $("#zdlw2").hide();
            }
        })
        showSizeBoxOther($("input[name='zdlw']"), $("#zdlwY"), ".addzdlwItem", "addzdlwItem");

        
        //梯轴 的 通用方法
        function showSizeBoxOther2(DomInpName, DomInpRadio, addBtn, addBtnName) {
            DomInpName.change(function () {
                if (DomInpRadio.prop('checked')) {
                    //获取是否选中 并判断是否显示 规格输入 盒子；
                    DomInpRadio.parent("label").parent("div").siblings("div.scaleBox").show();
                } else {
                    DomInpRadio.closest("div").siblings("div.scaleBox").hide();
                }
            });
            // 梯轴、添加新元素
            var indexNum = 1;
            $(document).on("click", addBtn, function () {
                indexNum = indexNum + 1;
                $(this).hide();
                if (addBtn != '.addtzItem_jc') {
                    $(this).closest("table").append(
                        `'<tr>
                            <td>
                                ` + indexNum + `
                            </td>
                            <td>
                                <input type="text">
                            </td>
                            <td>
                                <input type="text">
                            </td>
                            <td>
                                <input type="text">
                            </td>
                            <td>
                                <span class="`+ addBtnName +`">+添加规格</span>
                            </td>
                        </tr>'`
                    )
                } else {
                    $(this).closest("table").append(
                        $(this).closest("table").find('tr')[0].outerHTML.replace('display: none;',''))
                }
            });
        };
        showSizeBoxOther2($("input[name='tz']"), $("#tzY"), ".addtzItem", "addtzItem");
        showSizeBoxOther2($("input[name='zdfx']"), $("#zdfxY"), ".addtzItem2", "addtzItem2");
        showSizeBoxOther2($("input[name='nk']"), $("#nkY"), ".addtzItem3", "addtzItem3");
        showSizeBoxOther2($("input[name='jc']"), $("#jcY"), ".addtzItem_jc", "addtzItem_jc");
        

        //轴端方型 的 通用方法  键槽
        function showSizeBoxOther3(DomInpName, DomInpRadio, addBtn, addBtnName) {
            DomInpName.change(function () {
                if (DomInpRadio.prop('checked')) {
                    //获取是否选中 并判断是否显示 规格输入 盒子；
                    DomInpRadio.parent("label").parent("div").siblings("div.scaleBox").show();
                } else {
                    DomInpRadio.closest("div").siblings("div.scaleBox").hide();
                }
            });
        };
        showSizeBoxOther3($("input[name='zdfx']"), $("#zdfxY"), ".addzdfxItem", "addzdfxItem");
        showSizeBoxOther3($("input[name='jc']"), $("#jcY"), ".addjcItem", "addjcItem");

</script>

<%- include('../../components/footer'); %>